<template>
<view v-if="relatedListAll.length > 1" class="content-box">
    <image class="right-img" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/sort_icon.png"></image>
    <view class="flex flex-direction">
        <text class="title text-black text-bold">{{title}}</text>
        <text class="text-gray sub-title margin-top-xs">每周热播剧top3</text>
    </view>

    <view>
        <view v-for="(item,index) in relatedListAll" :key="index" class="item-box flex align-center" @tap="toDetail(item)">
            <image class="img-box" :src="item.coverImgUrl"></image>
            <view class="flex flex-direction flex-sub right-box">
                <image v-if="index === 0" class="icon-set" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/sort_icon1.png"></image>
                <image v-if="index === 1" class="icon-set" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/sort_icon2.png"></image>
                <image v-if="index === 2" class="icon-set" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/sort_icon3.png"></image>
                    <text class="text-box1">{{ item.title }}</text>
                <text class="text-gray text-box2 text-cut">{{ item.introduce }}</text>
                <view class="flex justify-between align-center bottom-box">
                    <text class="text-box3 text-cut">更新至第{{ item.updateOfEpisodes }}集</text>
                    <text v-if="!item.subscribe" class="btn-set" @tap.stop="addVideoView(item)">加入追剧</text>
                </view>
            </view>
        </view>
    </view>
</view>
</template>

<script>
	import jjItem from './jjItem.vue';
	export default {
		props:{
			title:{
				default:'猜你喜欢',
				type:String
			},
			list:{
				default:()=>{
					return []
				},
				type:Array
			}
		},
		components: {jjItem},
		data() {
			return {
				relatedListAll:[],
				relatedIndex: 0
			}
		},
        watch: {
            list: {
                handler(newVal) {
                    this.getBannerList()
                },
                deep: true,
                immediate: true
            }
        },
		methods: {
			isChangeRelated() {
				this.$uma && this.$uma.trackEvent('Ume_page1_control', {
					name: 'Ume_page1_control_change'
				});
				this.getBannerList();
			},
			getBannerList() {
				this.relatedListAll = this.list.map((item, index) => {
                    
					item = item.contentInfo;
					item['index'] = index;
					return item;
				});
                console.log('res=====', this.relatedListAll)
			},
			toDetail(item,type) {
				console.log('item', item);
				this.zwyRouter(`/pages/video/video?fakeId=${item.fakeId}&compilationId=${item.compilationId}`);
			},
            addVideoView(item) {
                this.zwyRequest({
                    header: {
                        'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
                    },
                    url: '/cdp/compilations/subscribe',
                    data: {
                        id: item.id
                    },
                    method: 'POST'
                }).then(res => {
                    uni.showToast({
                        title: '追剧成功',
                        icon: 'none'
                    })
                    this.toDetail(item)
                });
            }
		}
	}
</script>

<style lang="scss" scoped>
.content-box {
    width: 710rpx;
    background: #FFFFFF;
    box-shadow: 0px 0px 15rpx 0px rgba(0,0,0,0.06);
    border-radius: 30rpx;
    padding: 27rpx 47rpx 49rpx;
    position: relative;
    margin-bottom: 30rpx;
    .right-img {
        width: 89rpx;
        height: 87rpx;
        position: absolute;
        right: 44rpx;
        top: 0;
    }
    .title {
        font-size: 42rpx;
        line-height: 50rpx;
    }

    .sub-title {
        font-size: 28rpx;
        line-height: 36rpx;
    }
    .item-box {
        margin-top: 30rpx;
        .img-box {
            width: 110rpx;
            min-width: 110rpx;
            height: 197rpx;
            border-radius: 13rpx;
        }

        .right-box {
            position: relative;
            margin-left: 16rpx;
            .icon-set {
                position: absolute;
                right: 0;
                top: -20rpx;
                width: 45rpx;
                height: 53rpx;
            }
            .text-box1 {
                font-size: 32rpx;
                line-height: 45rpx;
                font-weight: 600;
                color: #333;
                margin-bottom: 10rpx;
            }
            .text-box2 {
                font-size: 26rpx;
                line-height: 37rpx;
                margin-bottom: 17rpx;
                color: #999;
                max-width: 420rpx;
            }
            .text-box3 {
                color: #666;
                font-size: 26rpx;
                line-height: 37rpx;
                max-width: 320rpx;
            }
            .btn-set {
                display: flex;
                align-items: center;
                justify-content: center;
                min-width: 158rpx;
                height: 54rpx;
                background: linear-gradient(340deg, #D283FF 0%, #7BB1FD 100%);
                border-radius: 30rpx;
                color: #FFFFFF;
                font-size: 26rpx;
                margin-left: 12rpx;
            }
            .bottom-box {
                width: 100%;
            }

        }
    }
}
</style>
